<template>
    <div id="student-det">
        <el-breadcrumb separators="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/student' }">学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>学生详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="form mt10 contentBox">
            <div class="list_head">
                <span class="head_name">学生信息：</span>
                <el-button type="primary" @click="$router.push('/student')" class="fr ml10">返回</el-button>
                <div>
                    <table class="table">
                        <tr>
                            <td class="gray">编号</td>
                            <td>{{student.number}}</td>
                            <td class="gray">学籍号</td>
                            <td>{{student.studentNumber}}</td>
                        </tr>
                        <tr>
                            <td class="gray">学生姓名</td>
                            <td>{{student.name}}</td>
                            <td class="gray">民族</td>
                            <td>{{student.nation}}</td>
                        </tr>
                        <tr>
                            <td class="gray">性别</td>
                            <td>{{student.gender}}</td>
                            <td class="gray">出生日期</td>
                            <td>{{student.birthday}}</td>
                        </tr>
                        <tr>
                            <td class="gray">入学年份</td>
                            <td>{{student.enrollmentYear}}</td>

                            <td class="gray">年级</td>
                            <td>{{student.grade}}</td>
                        </tr>
                        <tr>
                            <td class="gray">班级</td>
                            <td>{{student.className}}</td>
                            <td class="gray">学校</td>
                            <td>{{student.schoolName}}</td>
                        </tr>
                        <tr>

                            <td class="gray">家庭住址</td>
                            <td colspan="3" style="text-align:left;padding-left: 15px;">{{student.address}}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="list_head" v-for="parent in parents">
                <span class="head_name">家长信息：</span>
                <div>
                    <table class="table">
                        <tr>
                            <td class="gray">家长姓名</td>
                            <td>{{parent.name}}</td>
                            <td class="gray">关系</td>
                            <td>{{parent.relationName}}</td>
                        </tr>
                        <tr>
                            <td class="gray">年龄</td>
                            <td>{{parent.years}}</td>
                            <td class="gray">性别</td>
                            <td>{{parent.gender}}</td>
                        </tr>
                        <tr>
                            <td class="gray">手机号</td>
                            <td>{{parent.phone}}</td>
                            <td class="gray">微信号</td>
                            <td>{{parent.wechatNickname}}</td>
                        </tr>
                    </table>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";
    export default {
        data() {
            return {
                id: this.$util.getUrlParam("id"),
                student: {
                    schoolName: "",
                    name: "",
                    className: "",
                    teacherName: "",
                    gender: "1",
                    birthday: "",
                    nation: "",
                    studentCode: "",
                    enrollmentYear: '',
                    gradeId: "",
                    classId: "",
                    address: ""
                },
                parents: []
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.$util.setStore("stuSelect", "1");
            this.getDetail();
        },
        methods: {
            //获取学生详情
            getDetail() {
                this.$axios.post("/adminapi/v1/user/student/info?studentId=" + this.id).then(response => {
                    if (response.data.error == 10000) {
                        let info = response.data.data;
                        let grades = this.$util.getGrades();
                        let gradeName = this.$util.gradeFormat(info.grade * 1);
                        let className = gradeName + info.claNumber + "班";
                        info.className = info.className ? className + `（${info.className}）` : className;

                        this.student = {
                            name: info.name,
                            number: info.number,//编号
                            schoolName: info.schoolName,
                            gender: info.gender ? "男" : "女",
                            nation: info.nation,
                            birthday: info.birthday ? new Date(info.birthday * 1).format("yyyy.MM.dd") : "",
                            studentNumber: info.studentNumber,//学籍号
                            enrollmentYear: info.enrollmentYear ? new Date(info.enrollmentYear * 1).format("yyyy") : "",
                            grade: gradeName,
                            classId: info.classId,
                            className: info.className,
                            address: info.address
                        };

                        if (info.studentParentModels && info.studentParentModels.length) {
                            info.studentParentModels.forEach(item => {
                                let years = new Date().format("yyyy") - new Date(item.birthday * 1).format("yyyy");
                                if (!item.birthday) years = "";
                                this.parents.push({
                                    name: item.name,
                                    relationName: item.relationName,
                                    gender: item.gender ? "男" : "女",
                                    phone: item.phone,
                                    wechatNickname: item.wechatNickname,
                                    years: years
                                });
                            })
                        }

                    }
                })
            }
        }
    }
</script>
<style scoped>
    #student-det .my-textarea {
        width: 500px;
    }

    #student-det .table {
        border-collapse: collapse;
        margin-top: 16px;
    }

    #student-det .table td {
        width: 240px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        font-size: 18px;
        border: #EBEEF5 1px solid;
    }

    #student-det .table td.gray {
        color: #202020;
        background: #F7F7F8;
    }
</style>